

<template>
    <div>
        <Row>
            <Col span="24">
                <Card>
                    <p slot="title" style="height: 32px">
                        <Button type="primary" @click="alertAdd" icon="plus-round">新增</Button>
                    </p>
                    <div class="ivu-table-wrapper">
                        <div class="ivu-table ivu-table-border">
                            <table cellspacing="0" cellpadding="0" border="0" style="width:100%">
                                <thead>
                                    <tr>
                                        <th class="ivu-table-column-left">&nbsp;&nbsp;菜单名称</th>
                                        <th class="ivu-table-column-center">排序</th>
                                        <th class="ivu-table-column-center">权限别名</th>
                                        <th class="ivu-table-column-center">状态</th>
                                        <th class="ivu-table-column-center">操作</th>
                                    </tr>
                                </thead>
                                <tbody v-for="(vm,index) in tableData" :key="index">
                                    <tr>
                                        <td class="ivu-table-column-left">&nbsp;&nbsp;{{vm.name}}</td>
                                        <td class="ivu-table-column-center">{{vm.sort}}</td>
                                        <td class="ivu-table-column-center">{{vm.nameEn}}</td>
                                        <td class="ivu-table-column-center">
                                            <i-switch v-model="vm.status" :true-value="1" :false-value="0" @on-change="menuSwitch(vm)">
                                              <span slot="open">开</span>
                                              <span slot="close">关</span>
                                            </i-switch>
                                        </td>
                                        <td class="ivu-table-column-center">
                                            <i-button type="primary" size="small" @click="menuEdit(vm)">编辑</i-button>
                                           <Poptip style="text-align:left;" confirm title="您确定要删除这条数据吗？" @on-ok="menuDel(vm)">
                                               <Button type="error" size="small">删除</Button>
                                            </Poptip> 
                                        </td>                                    
                                    </tr>
                                    <tr v-for="(childen,cindex) in vm.children" :key="cindex">
                                        <td class="ivu-table-column-left">&nbsp;&nbsp;&nbsp;&nbsp;└―{{childen.name}}</td>
                                        <td class="ivu-table-column-center">{{childen.sort}}</td>
                                        <td class="ivu-table-column-center">{{childen.nameEn}}</td>
                                        <td class="ivu-table-column-center">
                                            <i-switch v-model="childen.status" :true-value="1" :false-value="0" @on-change="menuSwitch(childen)">
                                              <span slot="open">开</span>
                                              <span slot="close">关</span>
                                            </i-switch>
                                        </td>
                                        <td class="ivu-table-column-center">
                                            <i-button type="primary" size="small" @click="menuEdit(childen)">编辑</i-button>
                                            <Poptip style="text-align:left;" confirm title="您确定要删除这条数据吗？" @on-ok="menuDel(vm)">
                                               <Button type="error" size="small">删除</Button>
                                            </Poptip>            
                                        </td>                                    
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </Card>
            </Col>
        </Row>
        <Modal v-model="modalSetting.show" width="668" :styles="{top: '30px'}" @on-visible-change="doCancel">{{formItem}}
            <p slot="header" style="color:#2d8cf0;">
                <Icon type="information-circled"></Icon>
                <span>{{formItem.id ? '编辑' : '新增'}}菜单</span>
            </p>
            <Form ref="myForm" :rules="ruleValidate" :model="formItem" :label-width="80">
                <FormItem label="菜单名称" prop="name">
                    <Input v-model="formItem.name" placeholder="请输入菜单名称"></Input>
                </FormItem>
                <FormItem label="父级菜单" prop="pid">
                    <Select v-model="formItem.pid" filterable>
                        <Option :value="0">顶级菜单</Option>
                        <Option v-for="item in tableData" :value="item.id" :key="item.id">{{ item.name }}</Option>
                    </Select>
                </FormItem>
                <FormItem label="权限别名" prop="nameEn">
                    <Input v-model="formItem.nameEn" placeholder="请输入权限别名"></Input>
                    <p>例如：user:add</p>
                </FormItem>
                <!--FormItem label="菜单URL" prop="url">
                    <Input v-model="formItem.url" placeholder="请输入菜单URL">
                    <span slot="prepend">admin/</span>
                    </Input>
                </FormItem-->
                <FormItem label="菜单排序" prop="sort">
                    <InputNumber :min="0" v-model="formItem.sort"></InputNumber>
                    <Badge count="数字越小越靠前" style="margin-left:5px"></Badge>
                </FormItem>
            </Form>
            <div slot="footer">
                <Button type="text" @click="cancel" style="margin-right: 8px">取消</Button>
                <Button type="primary" @click="submit" :loading="modalSetting.loading">确定</Button>
            </div>
        </Modal>
    </div>
</template>

<script>
    export default {
        name: 'system_menu',
        data () {
            return {
                tableData: [],
                modalSetting: {
                    show: false,
                    loading: false,
                    index: 0
                },
                formItem: {
                    name: '',
                    pid: 0,
                    url: '',
                    nameEn:'',
                    sort: 0,
                    id: 0
                },
                ruleValidate: {
                    name: [
                        { required: true, message: '菜单名称不能为空', trigger: 'blur' }
                    ]
                }
            };
        },
        created () {
            this.getList();
        },
        methods: {
            //删除菜单
            menuDel(vm){
                this.$http.delete(this.$api.menu.delete,{id: vm.id}).then(res=>{
                    if (res.code === 1) {
                        this.$Message.success(res.msg);
                    } else  this.$Message.error(res.msg);
                });
            },
            //编辑菜单
            menuEdit(vm){
                this.formItem.id = vm.id;
                this.formItem.name = vm.name;
                this.formItem.pid = vm.pid;
                this.formItem.nameEn = vm.nameEn;
                this.formItem.sort = vm.sort;
                this.modalSetting.show = true;
            },
            //状态开关
            menuSwitch(vm){
                this.$http.post(this.$api.menu.switch,{id: vm.id}).then(res=>{
                    if (res.code === 1) {
                        this.$Message.success(res.msg);
                    } else  this.$Message.error(res.msg);
                });
            },
            alertAdd () {
                this.modalSetting.show = true;
            },
            submit () {
                let that = this;
                this.$refs['myForm'].validate((valid) => {
                    if (valid) {
                       that.modalSetting.loading = true;
                       that.$http.post(that.$api.resource.save,that.formItem).then(res=>{
                            if (res.code === 1) {
                                that.$Message.success(res.msg);
                            } else  that.$Message.error(res.msg);
                              that.getList();
                              that.cancel();
                        });
                    }
                });
            },
            cancel () {
                this.modalSetting.show = false;
            },
            doCancel (data) {
                if (!data) {
                    this.formItem.id = 0;
                    this.$refs['myForm'].resetFields();
                    this.modalSetting.loading = false;
                    this.modalSetting.index = 0;
                }
            },
            getList () {
                this.$http.get(this.$api.resource.list,this.searchConf).then(response=>{
                    if (response.success) {
                        this.tableData = response.data;
                    } else this.$Message.error(response.msg);
                });
            }
        }
    };
</script>